<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/swiper.css" />
		<link rel="stylesheet" href="css/mint.css">
	</head>
	<script src="js/serverUrl.js"></script>
	<script src="js/vue.js"></script>
	<script src="js/mint.js"></script>
	<script src="js/moment.js"></script>
	
	<style type="text/css">
			
			.pointContainer {
				display: flex;
				flex-direction: column;
			}
			
			.pointItem {
				display: flex;
				flex-direction: row;
				padding-left: 10px;
				padding-top: 10px;
				background-color: white;
				padding-bottom: 10px;
				border-top: 1px solid darkgray;
			}
			
			.pointInfo {
				flex: 1;
				display: flex;
				flex-direction: column;
			}
			
			.pointInfoRow {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
			
			.pointName{
				font-size: 14px;
				color: black;
				font-weight: bold;
			}
			
			.pointRule{
				font-size: 12px;
				color: #FEB26E;
			}
			.progressContainer{
				width: 100%;
				background-color: #C0C0C0;
				height: 4px;
				border-radius: 2px;
				margin-top: 8px;
			}
			.progress{
				height: 100%;
				background-color: #F44336;
				border-radius: 2px;
			}
			.btnContainer{
				width: 110px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.pointScore{
				margin-top: 8px;
				color: #bdbdbd;
				font-size: 12px;
			}
			.toLook{
				color: white;
				padding: 8px 12px 8px 12px;
				background-color: #F44336;
				border-radius: 5px;
				font-size: 14px;
			}
			.pointTab{
				height: 35px;
				width: 100%;
				background-color: white;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.pointRuleLabel{
				padding-left: 5px;
				border-left: 5px solid #F44336;
				margin-left: 10px;
				font-weight: bold;
				font-size: 16px;
			}
			
			.pointGoalLabel{
				margin-right: 20px;
				font-size: 12px;
			}
			.userPointContainer{
				width: 100vw;
				height: 35vw;
				background-color: #F44336;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.userPointLabel{
				font-size: 12px;
				color: white;
				margin-top: 10vw;
			}
			.userPointValue{
				font-size: 25px;
				font-weight: bold;
				color: white;
				margin-top: 10px;
			}
		</style>
	<body>
		<div id="app">
			<div class="userPointContainer">
				<div class="userPointLabel">成长总积分</div>
				<div class="userPointValue">{{totalScore}}</div>
			</div>
			<div class="pointTab">
				<div class="pointRuleLabel">积分规则</div>
				<div class="pointGoalLabel">今日已获得{{dayScore}}积分</div>
			</div>
			<div class="pointContainer">
				<div v-for="item in rankList" class="pointItem">
					<div class="pointInfo">
						<div class="pointInfoRow">
							<div class="pointName">{{item.rankConfigName}}</div>
							<div class="pointRule">+{{item.rankConfigValue}}分/{{item.rankConfigContent}}</div>
						</div>
						<div class="progressContainer">
							<div class="progress" :style="{'width': item.width}"></div>
						</div>
						<div class="pointInfoRow">
							<div class="pointScore">已获{{item.rankScore}}分</div>
							<div class="pointScore">上限{{item.rankConfigLimit}}分</div>
						</div>
					</div>
					<div class="btnContainer" >
						<div v-if="item.rankScore != item.rankConfigLimit" class="toLook">去看看</div>
					</div>
				</div>			
				
			</div>
		</div>
	</body>
	
	<script type="text/javascript">
		var app = new Vue({
		  el: '#app',
		  data: {
		          "userId": 2,
		          "totalScore": 112,
		          "dayScore": 1,
		          "rankList": [
		              {
		                  "rankConfigId": 1,
		                  "rankConfigName": "登录",
		                  "rankConfigContent": "每日首次登录",
		                  "rankConfigValue": 1,
		                  "rankConfigLimit": 1,
		                  "createTime": 1587886456000,
		                  "updateTime": 1587977777000,
		                  "rankRule": "1分/每日首次登录",
		                  "rankGoal": "已获得1分/每日上限1分",
		                  "rankScore": 1,
						  "width": "0"
		              },
		              {
		                  "rankConfigId": 2,
		                  "rankConfigName": "阅读文章",
		                  "rankConfigContent": "每有效阅读",
		                  "rankConfigValue": 1,
		                  "rankConfigLimit": 2,
		                  "createTime": 1592386566000,
		                  "updateTime": 1592468495000,
		                  "rankRule": "1分/每有效阅读",
		                  "rankGoal": "已获得0分/每日上限2分",
		                  "rankScore": 0,
			
		              },
		              {
		                  "rankConfigId": 3,
		                  "rankConfigName": "视听学习",
		                  "rankConfigContent": "每有效观看",
		                  "rankConfigValue": 2,
		                  "rankConfigLimit": 4,
		                  "createTime": 1592386567000,
		                  "updateTime": 1592468500000,
		                  "rankRule": "2分/每有效观看",
		                  "rankGoal": "已获得0分/每日上限4分",
		                  "rankScore": 0,

		              },
		              {
		                  "rankConfigId": 4,
		                  "rankConfigName": "每日一练",
		                  "rankConfigContent": "每日有效考试",
		                  "rankConfigValue": 3,
		                  "rankConfigLimit": 3,
		                  "createTime": 1592386568000,
		                  "updateTime": 1592470122000,
		                  "rankRule": "3分/每日有效考试",
		                  "rankGoal": "已获得0分/每日上限3分",
		                  "rankScore": 0
		              },
		              {
		                  "rankConfigId": 5,
		                  "rankConfigName": "每周答题",
		                  "rankConfigContent": "每周答题1组全对",
		                  "rankConfigValue": 10,
		                  "rankConfigLimit": 10,
		                  "createTime": 1592386574000,
		                  "updateTime": 1592470124000,
		                  "rankRule": "10分/每周答题1组全对",
		                  "rankGoal": "已获得0分/每日上限10分",
		                  "rankScore": 0,
		              },
		              {
		                  "rankConfigId": 6,
		                  "rankConfigName": "每月测试",
		                  "rankConfigContent": "每月答题1组全对",
		                  "rankConfigValue": 30,
		                  "rankConfigLimit": 30,
		                  "createTime": 1592386581000,
		                  "updateTime": 1592470127000,
		                  "rankRule": "30分/每月答题1组全对",
		                  "rankGoal": "已获得0分/每日上限30分",
		                  "rankScore": 0
		              }
		          ]
		      },
		  mounted() {
			  this.rankList.forEach(item => {
				  item.width = (item.rankScore*100/item.rankConfigLimit)+"%"
			  })
		  },
		  methods:{
			  toNewsDetail (dataId){
				alert(dataId)  
			  }
		  }
		})
	</script>
</html>
